<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顾客优惠券</title>
    <link rel="stylesheet" href="./assets/css/mdui.min.css">
    <script src="./assets/js/mdui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style>
        .mdui-card{
            margin:1rem 1rem;
            border-radius:1rem;
           
        }
        .mdui-card .cont{
            background-color: #fff;
            background-color:rgba(0,0,0,0.3); 
        }
        body{
            background-color: #f9f9f9;
        }
        header{
            background-color: #fff;
        }
        #loading{
            position: fixed;
            z-index: 999;

            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.3); 
            display: none;
            /* margin:1rem auto; */
        }
        #load{
            line-height:100%;
        }
    </style>
</head>
<body class="mdui-theme-primary-pink">


    
    <div  id="loading"> 
        <div id="load" class="mdui-center mdui-progress">
            <div class="mdui-center mdui-progress-indeterminate"></div>
        </div>
    </div>
    


    <div class="content" id="con1">
        <div class="mdui-card">
            <div class="mdui-card-media">
              <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552964096&di=55d7099251323f1856061d7111ae8496&src=http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1408/10/c0/37248876_1407600457159.jpg"/>
              <div class="mdui-card-media-covered mdui-card-media-covered-transparent cont">
                <div class="mdui-card-primary">
                  <div class="mdui-card-primary-title">3月份活动优惠券 </div>
                  <div style="font-size:0.5rem;" class="mdui-card-primary-subtitle">有效期 2019年3月19日10:58:38 到 2019年3月19日10:58:41</div>
                </div>
              </div>
            </div>
            <div class="mdui-card-actions">
              <button class="mdui-btn mdui-ripple">5张</button>
              <button class="mdui-color-pink mdui-float-right mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">分享</button>
            </div>
        </div>
        <div class="mdui-card">
            <div class="mdui-card-media">
              <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1552964096&di=55d7099251323f1856061d7111ae8496&src=http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1408/10/c0/37248876_1407600457159.jpg"/>
              <div class="mdui-card-media-covered mdui-card-media-covered-transparent cont">
                <div class="mdui-card-primary">
                  <div class="mdui-card-primary-title">3月份活动优惠券 </div>
                  <div style="font-size:0.5rem;" class="mdui-card-primary-subtitle">有效期 2019年3月19日10:58:38 到 2019年3月19日10:58:41</div>
                </div>
              </div>
            </div>
            <div class="mdui-card-actions">
              <button class="mdui-btn mdui-ripple">5张</button>
              <button class="mdui-color-pink mdui-float-right mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">分享</button>
            </div>
        </div>
      
    </div>
   